<template>
  <div id="product-seckill-page">
    <div class="page-title" style="background: none; color: #FFFFFF"
         :style="{
      top:(this.getSafeArea().top)+'px',
         }">
      <div id="back-button" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>限时秒杀</span>
    </div>
    <div class="top-page-banner"
         :style="{
      top:(this.getSafeArea().top)+'px',
         }">
      <img ref="top-page-banner-img" :style="{height:imageHeight+'px'}"
           :src="'/static/page-bg/product-seckill-page-bg.png'" alt="">
    </div>


    <div class="time-box" :style="{top:imageHeight+'px'}"
         v-if="detail.currShopProductSeckill && detail.currShopProductSeckill.hourArr && detail.currShopProductSeckill.hourArr.length>0">
      <div class="item" v-for="(item,index) in detail.currShopProductSeckill.hourArr" :key="index"
           :class="getClass(item)">
        <span v-text="item+':00'"></span>
      </div>
      <div class="c"></div>
    </div>


    <!--    Public/shopProductSeckillProductList-->

    <i-scroller-box id="product-list" ref="i-scroller-box"
                    url="Public/shopProductSeckillProductList"
                    :height="getWinSize().height-190-this.getSafeArea().top"
                    :style="{
      width:'100%',
      height: (getWinSize().height-imageHeight-this.getSafeArea().top)+'px',
      top:(imageHeight+this.getSafeArea().top)+'px'
         }">

      <template v-slot:list-item="{index,data}">
        <!--单个优惠券-->
        <div class="item" :key="index">
          <div class="left">
            <img :src="data.shopProductImage" alt="" @click="toDetail(data)">
          </div>
          <div class="right">
            <div class="title" v-text="data.shopProductName"  @click="toDetail(data)"></div>
            <div class="model">
              型号: <span v-text="data.model"></span>
            </div>
            <div class="process-box">
              <el-progress :percentage="getPercentage(data)" color="#f56c6c"></el-progress>
            </div>
            <div class="buy-box">
              <div class="price" v-text="'￥'+ToMoney(data.price)"></div>
              <el-button type="primary" @click="goToBuy(data)">立即抢购</el-button>
            </div>
          </div>
          <div class="c"></div>
        </div>
      </template>
    </i-scroller-box>


    <div class="no-seckill" :style="{paddingTop:  (imageHeight+250)+'px'}"
         v-if="!detail.currShopProductSeckill && !detail.nextShopProductSeckill">
      系统暂无秒杀活动,请您多关注App公告
    </div>

    <div class="next-seckill" :style="{paddingTop:  (imageHeight+250)+'px'}"
         v-if="!detail.currShopProductSeckill && detail.nextShopProductSeckill">
      下场秒杀活动将于: {{ detail.nextShopProductSeckill.day }} 开启
    </div>


  </div>
</template>

<script>
import IScrollerBox from '../common/IScrollerBox'

export default {
  name: 'ProductSeckill',
  components: {IScrollerBox},
  data: function () {
    return {
      imageHeight: (this.getWinSize().width * 0.5),
      timer: null,
      form: {
        page: 1,
        pageSize: 20,
      },
      detail: {
        currHour: 0,
        currShopProductSeckill: {
          hourArr: []
        },
        nextShopProductSeckill: {},
      },
      productList: [
        /*  {
           "id": 3,
           "shopId": 1,
           "shopName": "华盛五金店",
           "shopLogo": "http://image.yangfankj.com/shop/logo/1.jpg",
           "shopProductId": 3,
           "shopProductName": "德国欧莱德-磨角机",
           "shopProductImage": "http://image.yangfankj.com/product/103/0.jpg",
           "shopProductClassifyName": "磨角机",
           "model": "常规",
           "price": 215.00,
           "groupPrice": 195.00,
           "groupNums": 10,
           "nums": 215,
           "saleNums": -1,
           "status": 1,
           "startTime": null,
           "endTime": null,
           "isSeckill": null,
           "updatedTime": "2022-08-02 11:32:00"
         } */
      ],
      timeBoxTop: 178,
      productListMarginTop: 220,
    }
  },
  mounted () {
    let $this = this
    $this.getDetail()
    setTimeout(function () {
      $this.timeBoxTop = $this.$refs['top-page-banner-img'].offsetHeight
      $this.productListMarginTop = $this.$refs['top-page-banner-img'].offsetHeight + 40
    }, 500)

    $this.timer = setInterval(function () {
      $this.getDetail()
    }, 30000)
  },
  methods: {
    getList: function () {
      this.$refs['i-scroller-box'].getList({
        form: {
          currHour: this.detail.currHour
        }
      })
    },
    // 商品详情
    toDetail: function (item) {
      this.$router.push({
        name: 'ProductDetail',
        query: {
          id: item.shopProductId,
          model: item.model
        }
      })
    },
    getPercentage: function (item) {
      return ((item.nums / 100).toFixed(2) - 0) * 100
    },
    // 单独购买
    goToBuy: function (item) {
      var selectData = {
        shop: {
          id: item.shopId,
          name: item.shopName,
          logo: item.shopLogo
        },
        productList: [
          {
            nums: 1,
            model: item.model,
            price: item.price,
            name: item.shopProductName,
            image: item.shopProductImage,
            id: item.shopProductId
          }
        ]
      }
      localStorage.setItem('selectProductData', JSON.stringify(selectData))
      this.$router.push({
        name: 'ConfirmOrder',
        query: {
          type: 'one'
        },
      })
    },
    getDetail: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Public/shopProductSeckill', {
        page: $this.form.page,
        pageSize: $this.form.pageSize,
      }, function (data) {
        if (data.currShopProductSeckill) {
          data.currShopProductSeckill.hourArr = data.currShopProductSeckill.hourArr.split(',')
        }
        $this.detail = data
        $this.getList()
        $this.$forceUpdate()
      })
    },
    getClass: function (currHour) {
      if (currHour < this.detail.currHour) {
        return 'over'
      } else if (currHour == this.detail.currHour) {
        return 'curr'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>

</style>
